<template>
  <div class="goodsmanage h-100">
    <header>
      <el-input
        v-model="input1"
        class="btnaddgoods"
        placeholder="请输入查询的商品名称"
        :suffix-icon="Search"
      />
      <el-button type="primary" disabled>查询</el-button>
    </header>
    <main>
      <el-table :lodaing="loading" :data="tableData" style="width: 100%" border>
        <el-table-column label="商品名称" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row["商品名称"] }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品分类" width="180">
          <template #default="scope">
            <el-popover
              effect="light"
              trigger="hover"
              placement="top"
              width="auto"
            >
              <template #default>
                <div>产地: {{ scope.row["产地"] }}</div>
              </template>
              <template #reference>
                <el-tag>{{ scope.row["商品分类"] }}</el-tag>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="商品价格" width="180">
          <template #default="scope">
            <el-popover
              effect="light"
              trigger="hover"
              placement="top"
              width="auto"
            >
              <template #default>
                <div>产地: {{ scope.row["产地"] }}</div>
              </template>
              <template #reference>
                <el-tag>{{ scope.row["商品价格"] }}</el-tag>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="总库存" width="180">
          <template #default="scope">
            <el-popover
              effect="light"
              trigger="hover"
              placement="top"
              width="auto"
            >
              <template #default>
                <div>产地: {{ scope.row["产地"] }}</div>
              </template>
              <template #reference>
                <el-tag>{{ scope.row["总库存"] }}</el-tag>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="总销量" width="180">
          <template #default="scope">
            <el-popover
              effect="light"
              trigger="hover"
              placement="top"
              width="auto"
            >
              <template #default>
                <div>产地: {{ scope.row["产地"] }}</div>
              </template>
              <template #reference>
                <el-tag>{{ scope.row["总销量"] }}</el-tag>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="Operations">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >Edit</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >Delete</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </main>
    <footer></footer>
  </div>
</template>

<script>
import { goods } from "@/api/modules/goodsMock.js";
import { Search } from "@element-plus/icons-vue";
export default {
  name: "GoodsList",
  components: {},
  data() {
    return {
      tableData: [],
      loading: false,
      Search,
    };
  },
  methods: {
    refreshTable() {
      this.loading = true;
      goods.getAll().then((res) => {
        this.tableData = res;
      });
    },
    handleEdit(i, row) {
      console.log(i, row);
    },
    handleDelete(i, row) {
      console.log(i, row);
    },
  },
  mounted() {
    this.refreshTable();
  },
};
</script>

<style scoped lang="scss">
.goodsmanage {
  display: flex;
  flex-direction: column;
  header {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 60px;
    .btnaddgoods {
      margin: 0 10px;
      width: 200px;
      height: 38px;
    }
  }
  main {
    flex: 1;
    padding: 0 10px;
  }
  footer {
    height: 40px;
  }
}
</style>
